<template>
  <div class="zx">
    <h6><img src="../../../assets/img/yl-img/hy/hy-04.jpg" />{{enjoy}}</h6>
    <ul class="zunxiang">
      <li v-for="free in freesdata" :key="free.id">
        <img :src="free.img" >
        <p>{{ free.name }}</p>
        <span>{{ free.author }}</span>
      </li>
      <h5><span>查看更多</span> <span>换一换</span></h5>
    </ul>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Zunxiang",
  props: ["enjoy"],
  data() {
    return {
      frees: [],
      kv: {
        今日尊享推荐: "zunxaing",
      },
    };
  }, 
  // created() {
  //   axios({
  //     url: "/frees",
  //     params: {
  //       type: this.kv[this.title],
  //     },
  //   }).then((res) => (this.frees = res.data));
  // },

  created() {
    this.$store.dispatch("LINK_ZUNXIANG_DATA","/vip/frees")
    },
    computed:{
      freesdata(){
        return this.$store.state.VipZunXiangM.frees
      }
   }


};
</script>

<style scoped>
/* 尊享 */
.zx{
    margin-left: 0.12rem;
}
h6 {
  font-size: 0.17rem;
  padding-top: 0.3rem;
  width: 100%;
  height: 0.18rem;
  color: white;
  /* background-color: royalblue; */
}
.zunxiang {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.12rem;
}
.zunxiang li {
  width: 50%;
  margin-bottom: 0.2rem;
  color: white;
}
.zunxiang img {
  width: 1.9rem;
  height: 1.1rem;
  display: block;
}
.zunxiang li p {
  font-size: 0.14rem;
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
}
.zunxiang li span {
  color: #828288;
  font-size: 0.12rem;
}
h5 {
  font-weight: normal;
  height: 0.44rem;
  width: 100%;
  margin-top: 0.06rem;
}
h5 span {
  width: 1.9rem;
  display: inline-block;
  background-color: #25252f;
  line-height: 0.44rem;
  text-align: center;
  color: #e8e8f4;
  border-radius: 0.05rem;
}
h5 span:first-child {
  float: left;
  margin-right: 0.1rem;
  height: 100%;
}
</style>